<template>
  <div class="remind_container">
    <div
      class="remind_box"
      @mouseenter="onMouseEnter"
      @mouseleave="onMouseLeave"
    >
      <div class="remind_icon_box">
        <img
          src="@/assets/remind/icon-custom-float.png"
          alt=""
          class="remind_icon"
        />
      </div>
      <div
        class="remind_dot_box"
        v-if="remindObj.agent !== 0 || remindObj.get_pay !== 0"
      ></div>
      <!-- 弹窗 -->
      <div class="remind_popup_box" v-if="isShowRemindPopup">
        <div class="remind_img_box">
          <img
            src="@/assets/remind/img-remind-popup.png"
            alt=""
            class="remind_img"
          />
        </div>
        <div class="remind_popup_all">
          <div @click="handleReadRemind('agent')">
            合伙人申请消息：<span class="remind_popup_title">{{
              remindObj.agent
            }}</span>
          </div>
          <div @click="handleReadRemind('get_pay')">
            提现记录消息：<span class="remind_popup_title">{{
              remindObj.get_pay
            }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getAdminMessage, cleanAdminMessage } from "@/api/remind";
export default {
  data() {
    return {
      remindObj: {},
      isShowRemindPopup: false,
      clearTitle: "",
    };
  },
  created() {
    this.getAdminMessage();
  },
  methods: {
    // 读取后台消息通知接口
    getAdminMessage() {
      getAdminMessage().then((res) => {
        if (res.code == 1) {
          this.remindObj = res.data;
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 清除未读消息接口
    cleanAdminMessage() {
      cleanAdminMessage({
        title: this.clearTitle,
      }).then((res) => {
        if (res.code == 1) {
          this.getAdminMessage();
        } else {
          this.$message.error(res.msg);
          return;
        }
      });
    },

    // 点击消息
    handleReadRemind(val) {
      this.clearTitle = val;
      this.cleanAdminMessage();
      if (val == "agent") {
        this.$router.push({
          path: "/partnerManagement/partnerApplication",
        });
      } else {
        this.$router.push({
          path: "/withdrawalApplication/withdrawalApplication",
        });
      }
    },

    // 鼠标经过
    onMouseEnter() {
      this.isShowRemindPopup = true;
    },

    // 鼠标离开
    onMouseLeave() {
      this.isShowRemindPopup = false;
    },
  },
};
</script>
<style lang="scss" scoped>
.remind_container {
  position: fixed;
  bottom: 121px;
  right: 17px;
  z-index: 1000;

  .remind_box {
    .remind_icon_box {
      width: 80px;
      height: 80px;

      .remind_icon {
        width: 100%;
        height: 100%;
      }
    }

    .remind_dot_box {
      position: absolute;
      top: 0;
      right: 14px;
      width: 20px;
      height: 20px;
      background: red;
      border-radius: 50%;
    }

    .remind_popup_box {
      .remind_img_box {
        position: absolute;
        top: -5px;
        left: -275px;

        .remind_img {
          width: 277px;
          height: 115px;
        }
      }

      .remind_popup_all {
        position: absolute;
        top: 7px;
        left: -245px;
        color: #000;
        font-size: 18px;
        padding: 5px 10px;
        border-radius: 10px;
        line-height: 40px;
        cursor: pointer;
        z-index: 888;

        .remind_popup_title {
          color: red;
        }
      }
    }
  }
}
</style>
